<template>
  <div class="member-index-content">
    <div class="member-header">
      <!-- 工具栏 -->
      <div class="tool-bar flex justify-end align-center">
        <div class="tool-item"
             @click="openLink()">
          <img :src="require('@/assets/image/member-tool-icon-1.png')"
               class="tool-icon">
        </div>
        <div class="tool-item"
             @click="openLink('MemberSetting')">
          <img :src="require('@/assets/image/member-tool-icon-2.png')"
               class="tool-icon">
        </div>
      </div>

      <!-- 个人信息 -->
      <div class="member-info flex align-center">
        <div class="avatar-content">
          <img class="avatar-img"
               :src="user.member_avatar">
        </div>

        <div class="flex-sub main-info">
          <div class="flex floor align-center">
            <div class="member-name">{{user.member_nickname || user.member_name || '载入中'}}</div>
            <div class="level">
              <img class="level-icon"
                   src="@/assets/image/vip-icon.png" />
              <span class="tag">{{user.level_name}}</span>
            </div>
          </div>
          <div class="member-mobile floor"> {{mobileMosaic(user.member_mobile)}}</div>
        </div>
      </div>
    </div>

    <!-- 订单 -->
    <div class="module-block">
      <div class="title flex justify-between align-center"
           @click="openLink('BillsFlow')">
        <span>我的钱包</span>
        <div class="more flex align-center">
          <span>全部账单</span>
          <van-icon name="arrow"></van-icon>
        </div>
      </div>
      <div class="content flex flex-line-3">
        <div class="content-item"
             @click="openLink('BillsFlow')">
          <div class="blod-money">
            {{user.available_predeposit}}
          </div>
          <div>余额</div>
        </div>
        <div class="content-item"
             @click="openLink('BillsFlow')">
          <div class="blod-money">
            {{user.member_points}}
          </div>
          <div>消费币</div>
        </div>

        <div class="content-item"
             @click="openLink()">
          <div class="blod-money">
            {{user.estimated_revenue}}
          </div>
          <div>预计收益</div>
        </div>
      </div>
    </div>

    <!-- 订单 -->
    <div class="module-block">
      <div class="title flex justify-between align-center"
           @click="openLink('OrderList')">
        <span>我的订单</span>
        <div class="more flex align-center">
          <span>全部订单</span>
          <van-icon name="arrow"></van-icon>
        </div>
      </div>
      <div class="content flex flex-line-4">
        <div class="content-item"
             v-for="item in onlineItem"
             :key="'offline_'+item.id"
             @click="openLink(item.path,item.query)">

          <div class="flex-item">
            <div class="tag-item">
              <img class="order-icon"
                   :src="item.icon" />
              <div class="num-tag"
                   v-if="user[item.countKey] > 0">{{user[item.countKey]}}</div>
            </div>
            <div>{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 常用工具 -->
    <div class="module-block">
      <div class="title flex justify-between align-center">
        <span>常用工具</span>
      </div>
      <div class="content flex flex-line-4">
        <div class="content-item"
             v-for="item in serviceItem"
             :key="'offline_'+item.id"
             @click="openLink(item.path,item.query)">

          <div class="flex-item">
            <div class="tag-item">
              <img class="order-icon"
                   :src="item.icon" />
              <div class="num-tag"
                   v-if="user && user[item.countKey] > 0">{{user[item.countKey]}}</div>
            </div>
            <div>{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import IconList from './IconList'
import { getMemberIndex } from '@/api/memberInfo'
import { mobileMosaic } from '@/utils/utils'
import { mapMutations } from 'vuex'
export default {
  name: 'MemberIndex',
  data() {
    return {
      onlineItem: Object.freeze(IconList.onlineItem),
      serviceItem: Object.freeze(IconList.serviceItem),
      mobileMosaic: Object.freeze(mobileMosaic),
      user: false
    }
  },
  created() {
    this.initMemberInfo()
  },
  methods: {
    ...mapMutations({
      memberUpdate: 'memberUpdate'
    }),
    /**
     * 初始化个人中心信息
     */
    initMemberInfo() {
      getMemberIndex()
        .then(res => {
          if (res && res.result.member_info) {
            this.user = res.result.member_info
            // 更新用户信息
            this.memberUpdate({ info: res.result.member_info })
          }
        })
        .catch(res => {
          this.$toast({
            type: 'fail',
            message: res.message
          })
        })
    },
    /**
     * 打开链接
     * @param {String} name 要打开的页面名称
     * @param {String} query 要传递的参数值
     */
    openLink(name, query) {
      if (!name) return false
      this.$router.push({ name, query })
    }
  }
}
</script>

<style lang="scss">
.member-index-content {
  padding-bottom: 10px;
  .member-header {
    background-color: #000000;
    color: #ffffff;
    padding: 16px;
    .tool-item {
      width: 24px;
      height: 24px;
      & + .tool-item {
        margin-left: 16px;
      }
      .tool-icon {
        width: 100%;
        height: 100%;
      }
    }

    .member-info {
      margin-top: 25px;
      .avatar-content {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
        .avatar-img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }

      .main-info {
        .member-name {
          font-size: 17px;
          font-weight: bold;
          margin-right: 10px;
        }
        .level {
          display: block;
          background: #e8c973;
          height: 18px;
          line-height: 18px;
          border-radius: 9px;
          font-size: 12px;
          color: #8c4f26;
          padding-left: 6.5px;
          font-weight: bold;
          .level-icon {
            width: 12px;
            height: 12px;
            flex-grow: 0;
            flex-shrink: 0;
          }
          .tag {
            padding: 0 15px 0 5px;
          }
        }
        .member-mobile {
          font-size: 14px;
        }
        .floor + .floor {
          margin-top: 10px;
        }
      }
    }
  }

  .module-block {
    width: 355px;
    background-color: #ffffff;
    margin: 0 auto;
    border-radius: 5px;
    font-size: 12px;
    margin-top: 10px;
    .title {
      padding: 0 15px;
      width: 100%;
      border-bottom: 1px solid #f2f2f2;
      font-size: 14px;
      font-weight: bold;
      height: 48px;
      line-height: 48px;
      &:active {
        background-color: #f9f9f9;
      }
      .more {
        font-weight: normal;
        font-size: 12px;
        color: #666666;
      }
    }

    .content {
      width: 100%;
      flex-wrap: wrap;
      // 一行4个的布局
      &.flex-line-3 {
        .content-item {
          min-width: 33%;
        }
      }
      // 一行4个的布局
      &.flex-line-4 {
        .content-item {
          min-width: 25%;
        }
      }
      // 一行4个的布局
      &.flex-line-5 {
        .content-item {
          min-width: 20%;
        }
      }
      .flex-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 55px;
        margin-top: 15px;
      }

      .content-item {
        height: 85px;
        text-align: center;
        color: #71737b;
        font-size: 12px;
        &:active {
          background-color: #f9f9f9;
        }
        // 钱包
        .font-bold {
          color: #292b32;
          font-size: 18px;
          font-weight: bold;
        }
        .wall-icon {
          width: 28px;
          height: 28px;
        }

        .wallet-line {
          width: 9px;
          height: 51px;
        }

        // 订单icon
        .order-icon {
          width: 30px;
          height: 30px;
        }

        // 服务icon
        .big-icon {
          width: 36px;
          height: 36px;
        }

        .blod-money {
          font-size: 20px;
          font-weight: bold;
          color: #333333;
          height: 55px;
          line-height: 55px;
        }
      }
    }

    // 带浮标的图标
    .tag-item {
      position: relative;
      .num-tag {
        background-color: #f73b3c;
        color: #ffffff;
        font-size: 11px;
        height: 14px;
        line-height: 14px;
        text-align: center;
        padding: 0 4px;
        position: absolute;
        top: -5px;
        right: -5px;
        border-radius: 7px;
      }
    }
  }
}
</style>
